<script src="./certids.component.js"></script>
<style src="./certids.css" scoped></style>
<template>
	<view>
		<!-- <scroll-view scroll-x class="bg-white nav text-center padding-tb">
			<view @tap="change(0)" class="cu-item radius-top-bottom-left" :class="{cur:btnnum == 0}">个人认证</view>
			<view @tap="change(1)" class="cu-item radius-top-bottom-right" :class="{cur:btnnum == 1}">企业认证</view>
		</scroll-view> -->
		<view>
			<form>
				<view class="cu-form-group margin-top-xs">
					<view class="title">实名类型</view>
					<picker @change="PickerChange" :value="index" :range="picker">
						<view class="picker">
							{{index>-1?picker[index]:'居民身份证'}}
						</view>
					</picker>
				</view>
				<view class="cu-bar bg-white margin-top-xs">
					<view class="action  text-xl text-black">
						上传身份证
					</view>
				</view>
				<view class="padding-bottom-lg bg-white">	
					<view class="cu-form-group imagesize">
							 <image class="headimgsize" :src="downPhoto" mode="aspectFit" @tap="scan1()"></image>
					</view>
					<view class="text-center padding-tb-sm">点击上传身份证（国徽面）</view>
				</view>
				<view class="padding-bottom-lg bg-white">
					<view class="cu-form-group imagesize">
							 <image class="headimgsize" :src="upPhoto" mode="aspectFit" @tap="scan()"></image>
					</view>
					<view class="text-center padding-tb-sm">点击上传身份证（人像面）</view>
				</view>
				<view class="cu-form-group margin-top-xs">
					<view class="title">真实姓名</view>
					<input placeholder="拍照可智能识别" class="text-right" v-model="name"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">身份证号</view>
					<input type="number" placeholder="拍照可智能识别" class="text-right" v-model="IdNumber"></input>
				</view>
				
				<view class="cu-form-group">
					<view class="title">性别</view>
					<radio-group class="input-row flex justify-between" @change="RadioChange">
						<label><radio class='blue radio' :class="radio=='男'?'checked':''" :checked="radio=='男'?true:false" value="男" style="transform: scale(0.6)"></radio>男</label>
						<label class="margin-left-xl"><radio class='blue radio' :class="radio=='女'?'checked':''" :checked="radio=='女'?true:false" value="女" style="transform: scale(0.6)"></radio>女</label>
					</radio-group>
				</view>
				<view class="cu-form-group">
					<view class="title">手机号码</view>
					<view class="text-lg">{{uerInfo.phone}}</view>
				</view>
				
				<view class="cu-form-group input-row solid-bottom flex justify-between">
					<view class="title">验证码</view>
					
					<input type="number" placeholder="请输入验证码" class="text-center" v-model="code"></input>
					<button type="primary" v-if="showText==true" class="cu-btn bg-blue shadow'" @click="getCode">发送验证码</button>
					<button type="primary" v-else class="cu-btn bg-blue shadow'" :disabled="disabled">{{second}}s重新发送</button>
				</view>
			</form>
			<view class="margin-top-xxl margin-bottom-xxxxl">
				<button class="cu-btn block bg-blue margin-lr-xl lg round" type="primary" @click="getIDCard()">提交实名</button>
			</view>
		</view>
		
		<view class="cu-tabbar-height"></view>
	</view>
</template>
<script>
	import { pathToBase64, base64ToPath } from '@/components/image-tools/image-tools.js'
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				index: -1,
				picker: ['居民身份证'],
				upPhoto:"../../static/upPhoto.jpg",
				downPhoto:"../../static/downPhoto.jpg",
				upPhotobase64:"",
				downPhotobase64:"",
				name: "",
				IdNumber:"",
				radio: '男',
				//cellphone:"",
				code: '',
				disabled:true,
				second:120,
				showText:true,
				corporatename: "",
				creditcode:"",
				//iconcheck:0, //头像是否改变
				image:"../../static/businesslicense.jpg",
				farenname:"",
				fareidcardno:"",
				farenname:"",
				contactsname:"",
				contactsname:"",
				corporateaddress:"",
				corporateaccount:"",
				corporateaccountno:"",
				accountpeningbranch:"",

				pickerText: '',
				provinceCodeText:'',
			};
		},
		computed: mapState(['hasLogin','uerInfo']),
		methods: {
			...mapMutations(['login','setToken']),
			RadioChange(e) {
				this.radio = e.detail.value
			},
			
			PickerChange(e) {
				this.index = e.detail.value
			},
			getCode(){
				// var tell = this.tell; //手机号验证
				// var res11 = tell.test(this.cellphone);
				// if(res11==false){
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '手机号码填写有误'
				// 	}); 
				// 	return false;  
				// }
				uni.request({
					url: this.$serverUrl+'/isalary/user/senderVerifyCode',
					method:'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						 "Authorization":uni.getStorageSync('token')
					},
					data: {
						//cellphone: this.cellphone
						realName:this.name,
						cardNo:this.IdNumber
					},
					success: (res) => {
						if (res.data.code == 0) {
							uni.showToast({
								icon: 'success',
								title: res.data.msg
							});
							/*验证码倒计时效果*/
							this.showText = false
							var interval = setInterval(() => {
								let times = --this.second
								this.second = times<10?'0'+times:times //小于10秒补 0
							}, 1000)
							setTimeout(() => {
								clearInterval(interval)
								this.second=120
								this.showText = true
							}, 120000)
						} else {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});
						}
					},
					fail:function(e){
					}
				})
						
					
			},
			getIDCard() {
				var flag=this.verifyData();
				
				if(flag){
					uni.showLoading({
						mask: true,
						title: "正在提交..."
					});
					uni.request({
						url: this.$serverUrl+'/isalary/user/userAuth',
						method:'POST',
						data: {
							faceFile:this.upPhoto,
							backFile:this.downPhoto,
							realName:this.name,
							cardNo:this.IdNumber,
							gender:this.radio,
							identityType:0,
							verifyCode:this.code
						}, 
						header:{
							'content-type':'application/x-www-form-urlencoded',
							"Authorization":uni.getStorageSync('token')
						},
						success:(res) => {
							console.log(res.data.code)
							if (res.data.code == 0){
								uni.hideLoading();
								uni.showToast({
									icon:'success',
									title:res.data.msg,
								})
								//重新刷新token
								this.refreshToken();
							}else{
								uni.showToast({
									icon:'none',
									title:res.data.msg,
								})
							}
						},
						error(e){
							uni.showToast({
								title:e,
							})
						}
					});
				}
			},	
			//校验输入的数据
			verifyData() {
				var flag = true;
				var idcardreg = this.idcardreg; // 正则身份证
				//var tell = this.tell; //手机号验证
				
				if (!this.name) {
					flag = false;
					uni.showToast({
						icon: 'none',
						title: '姓名不能为空'
					});
					return false;
				}
				if (!this.IdNumber) {
					flag = false;
					uni.showToast({
						icon: 'none',
						title: '身份证号不能为空'
					});
					return false;
				}
				
				var res =idcardreg.test(this.IdNumber);
				if(res==false){
					flag = false;
					uni.showToast({
						icon: 'none',
						title: '身份证号填写有误'
					}); 
					return false;  
				} 
				// if (!this.cellphone) {
				// 	flag = false;
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '手机号码不能为空'
				// 	});
				// 	return false;
				// }
				
				// var res1 = tell.test(this.cellphone);
				// if(res1==false){
				// 	flag = false;
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '手机号码填写有误'
				// 	}); 
				// 	return false;  
				// }
				if (this.code.length < 6) {
					uni.showToast({
						icon: 'none',
						title: '验证码最短为 6 个字符'
					});
					return false;
				}
				return flag;
			},
			scan() {
				uni.chooseImage({
					count: 1,
					sourceType: ['album', 'camera'],
					success: (res) => {
						pathToBase64(res.tempFilePaths[0]).then(base64 => {
								 console.log(base64)
								this.upPhoto=base64;
								uni.showLoading({
									mask: true,
									title: "识别中，请等待"
								});
								uni.request({
									url: this.$serverUrl+'/isalary/user/credentialVerify',
									method: 'POST',
									name: 'file',
									data: {
										faceFile: base64
									},
									header:{
										'content-type':'application/x-www-form-urlencoded',
										"Authorization":uni.getStorageSync('token')
									},
									success: (res) => {
										console.log('上传头像', res)
										if (res.data.code == 0) {
											uni.hideLoading();

											this.name = res.data.data.realName;
											this.IdNumber = res.data.data.cardNo;
											this.radio = res.data.data.gender;
											uni.showToast({
												title: '识别成功',
												icon: 'success'
											})
											
											//this.$store.dispatch('userInfo', res.data.user)
											//uni.setStorageSync('user', res.data.user)
										} else {
											this.name='';
											this.IdNumber='';
											uni.showToast({
												title: res.data.msg,
												icon: 'none'
											})
										}
									}
								})
							})
					}
				})
				
			},
			scan1() {
				uni.chooseImage({
					count: 1,
					sourceType: ['album', 'camera'],
					success: (res) => {
						pathToBase64(res.tempFilePaths[0]).then(base64 => {
								// console.log(base64)
								this.downPhoto=base64;
							})
					}
				})
			},
			refreshToken(){
				//重新刷新token
				uni.request({
					url: this.$serverUrl+'/isalary/login/refreshToken',
					method:'GET',
					header:{
						'content-type':'application/x-www-form-urlencoded',
						"Authorization":uni.getStorageSync('token')
					},
					success:(res) => {
						//console.log(res.data.code)
						if (res.data.code == 0){
							this.login(res.data.data);
							this.setToken(res.data.data);
							setTimeout(()=>{
								uni.reLaunch({
									url: '../mine/mine',
								});
							}, 1000)
						
						}else{
							uni.showToast({
								icon:'none',
								title:res.data.msg,
							})
						}
					},
					error(e){
						uni.showToast({
							title:e,
						})
					}
				});
			}
			// 上传营业执照 
			// upload(){
			//   uni.chooseImage({
			// 		count: 1,
			// 		sourceType: ['album', 'camera'],
			// 		success: (res) => {
			// 			pathToBase64(res.tempFilePaths[0]).then(base64 => {
			// 					// console.log(base64)
			// 					this.image=base64;
			// 					//this.iconcheck = 1;//点击后图片更改状态由0变成1
			// 				})
			// 		}
			//   })
			// },
			  
			 
			  
		}
	}
</script>

<style>
	
	.imagesize{
		display:flex;
		height: 335upx; 
		justify-content: center;        
		align-items:center;
	}
	.imagesize image { 
	  width:620upx;
	  height:335upx;
	}
	/* 将三个内容view的display设置为none(隐藏) */
	
	

	
	.nav .cu-item {
		height: 70upx;
		display: inline-block;
		line-height: 64upx;
		padding: 0 30upx;
		margin: 0;
		border:1upx solid #c9c9c9;
	}
	.nav .cu-item:nth-child(1){
		border-right: 0 none;
	}
	.nav .cu-item:nth-child(2){
		border-left: 0 none;
	}
	
	
	.nav .cu-item.cur {
		background-color: #0077ff;
		color: #ffffff;
		border:1upx solid #0077ff
	}
	uni-button[disabled]:not([type]){
		color: #fff!important;
	}
</style>